<template>
    <div>
        <van-search placeholder="请输入搜索关键词" @click="toSearch" />
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>1</van-swipe-item>
            <van-swipe-item>2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
        </van-swipe>
        <!-- 宫格 -->
        <van-grid :column-num="5">
            <van-grid-item v-for="item in gridlist" :key="item.key">
                <template #default>
                    <van-image radius="50" :src="item.img" />
                    <span class="van-grid-item__text">{{ item.title }}</span>
                </template>
            </van-grid-item>
        </van-grid>
        <!-- 列表 -->
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <van-list :finished="finished" finished-text="没有更多了" @load="_page++">
                <div class="list">
                    <dl v-for="item in list" :key="item.id" @click="toDetail(item)">
                        <dt>
                            <img :src="item.img" alt="">
                        </dt>
                        <dd>
                            <h4>{{ item.title }}</h4>
                            <p>
                                <span class="nowprice">{{ item.price }}</span>
                                <span class="oldprice">{{ item.oldprice }}</span>
                            </p>
                        </dd>
                    </dl>
                </div>
            </van-list>
        </van-pull-refresh>

    </div>
</template>


<script setup>
import axios from 'axios';
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';

const gridlist = ref([])
const list = ref([])
const finished = ref(false);
const _page = ref(1)
const loading = ref(false);
const onRefresh = () => {
    _page.value = 1
}

const router = useRouter()
// 跳转搜索页
const toSearch = () =>{
    router.push({
        path: '/search'
    })
}

// 跳转详情页
const toDetail = item =>{
    router.push({
        path: '/detail',
        query: item
    })
}

// 获取列表数据
const getList = () => {
    loading.value = true
    axios.get('/api/list', { params: { _page: _page.value } }).then(res => {

        // 请求不到数据时（接口返回空数组时），就不再触发load事件（finished的值为true）
        if (res.data.length === 0) {
            finished.value = true
        } else {
            finished.value = false
        }

        if (_page.value === 1) {
            list.value = res.data
        } else {
            list.value = list.value.concat(res.data)
        }
        loading.value = false
    })
}
// 获取宫格数据
const getGrid = () => {
    axios.get('/api/list1').then(res => {
        gridlist.value = res.data
    })
}

getGrid()
getList()

watch(_page, () => {
    getList()
})

</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}

.list {
    display: flex;
    flex-wrap: wrap;

    dl {
        width: 50%;
        padding: 10px;

        img {
            width: 100%;
        }

        p {
            line-height: 40px;

            .nowprice {
                color: red;
                font-size: 20px;
                margin-right: 15px;
            }

            .oldprice {
                font-size: 16px;
                text-decoration: line-through
            }
        }
    }
}
</style>